<template>
    <div class="slideMenu"  @click="hide">
        <ul class="menu" ref="slideMenu">
            <li v-for="(item,index) in getItemList" :key="index" @click="clickLi(index)"> {{item}}</li>
            <li>取消</li>
        </ul>
    </div>
</template>
<script>
import {mapActions,mapGetters,mapState} from "vuex"
export default {
    name:"SlideMenu",
    computed:{
         ...mapGetters(["getItemList"]),
          ...mapState(["slideMenuConfig"])
    },
    methods:{
        ...mapActions(["hideMenu"]),
        hide(){
            this.$refs.slideMenu.classList.remove("active"); 
            setTimeout(() => {
                 this.hideMenu();            
            },300);
        },
        clickLi(index){
           this.slideMenuConfig.callBack(index);
        }
    },
    mounted(){
        setTimeout(() => { 
            this.$refs.slideMenu.classList.add("active");
        });
    }
}
</script>
<style lang="scss" scoped>
     .slideMenu{
         position: fixed;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         background: rgba(0,0,0,0.6);
         display: flex;
         align-items: flex-end;
         z-index: 9999;
         .menu{
             width: 100%;
             margin: 0;
             padding: 0;
             list-style-type: none;
             background: #ececec;
             transform: translateY(100%);
             transition: all 0.3s linear;
             &.active{
                 transform: translateY(0);
             }
             >li{
                 background: white;
                 height: .8rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 border-bottom: 1px solid #ececec;
                 &:last-child{
                     margin-top:.1rem; 
                 }
             }
         }
     }
</style>